import Vue from "vue";
import autosize from "../../utils/autosize";
import Loading from "./loading";
import $ from "jquery";
import com from "../../utils/common";

var Section = {};
Section.Temp = `
<div  class="section">
  <div class="activity_des" v-for="(item,SectionIndex) in sedata.Section">
    <div class="activity_des_title">
        <h2 class="f1">
            <input type="text" v-model="item.Title">
        </h2>
    </div>
    <div class="activity_des_content prizes_desc">
        <ul>
            <li v-if="item.Placeholder"> 
                <div style="position:relative;left:0;top:0;">
                    <textarea class="dashed" name="product_des" v-model="item.PlaceText" :placeholder="item.Placeholder"></textarea>
                </div>
            </li>
            <li v-for="(desc,index) in item.Desc">
                <div v-if="desc.Text || desc.Text == ''" style="position:relative;left:0;top:0;">
                    <textarea class="dashed" name="product_des" v-model="desc.Text" placeholder="请输入文字描述"></textarea>
                    <div v-if="item.AddMsg" class="delete_prize" v-on:click="deleteUp(index,item.Desc)"></div>
                </div>
                <div v-if="desc.Img && desc.Img!=''" class="content_img" style="position:relative;left:0;top:0;">
                    <div>
                        <img :src="desc.Img" alt="">
                    </div>
                    <div class="delete_prize" v-on:click="deleteUp(index,item.Desc)"></div>
                </div>
                <div v-if="desc.Video && desc.Video!=''" style="position:relative;left:0;top:0;">
                    <iframe :src="desc.Video" class="page_iframe"></iframe>
                    <div class="delete_prize" v-on:click="deleteUp(index,item.Desc)"></div>
                </div>
            </li>
        </ul>
        <!-- 图片上传-->
        <div class="up_message" v-if="item.AddMsg">
            <div class="word_up" v-on:click="addWord(item,SectionIndex)">
                <div>
                    <img src="/img/activity/btn-addtext@2x.png" alt="">
                </div>
                <p>添加文本</p>
            </div>
            <div class="tpsc">
                <div>
                    <img src="/img/activity/btn-addimage@2x.png" alt="">
                </div>
                <p>添加图片</p>
                <form class="descUp">
                    <input type="file" :id="'inputfile'+SectionIndex"
                    name="files" multiple="multiple" 
                      class="up-img"
                     ref="'inputer'+SectionIndex"
                     accept="image/jpg,image/jpeg,image/png,image/gif" 
                     @change="uploadImage(SectionIndex)">
                </form>
            </div>
            <div class="video_up" v-on:click="videoTipsPop(SectionIndex)">
                <div>
                    <img src="/img/activity/btn-addvideo@2x.png" alt="">
                </div>
                <p>添加视频</p>
            </div>
        </div>
    </div>
  </div>
  <!-- 背景 -->
  <div class="mask">
      <div class="select show_update_video">
          <section class="change_select">
              <div class="cross"></div>
              <div class="select_content title_content">
                  <img src="/img/activity/update_video_des.jpg" alt="">
              </div>
              <div class="content_change" id="alertVideoPop">输入视频链接</div>
          </section>
      </div>
      <div class="pop_ups">
          <div class="arc_area">
              <img src="/img/activity/element-popup-orange@2x.png" alt="">
              <h2>请输入视频地址</h2>
          </div>
          <input id="video_input" type="text" placeholder="请输入视频地址" v-model="sedata.VideoUrl">
          <p>请将腾讯视频分享链接中的iframe代码复制到上方输入框中</p>
          <div class="submit_message" v-on:click="addVideo">提交</div>
      </div>
  </div>
</div>
`;
let EditSection = Vue.extend({
  template: Section.Temp,
  props: ["sedata"],
  mounted(){
    $("#app").on("click",".show_update_video,.pop_ups",function (event) {
      event.stopPropagation()
    })
    $("#app").on("click",".mask",function () {
      $(".mask").hide();
    })
  },
  methods: {
    //添加文本
    addWord: function (item, index) {
      this.sedata.Section[index].Desc.push({
        Text: ``
      });
    },
    //上传图像
    uploadImage: function (index) {
      let self = this;
      let inputDom = $("#inputfile" + index);
      let formData = new FormData();
      for (var i = 0; i < inputDom[0].files.length; i++) {
        formData.append("files", inputDom[0].files[i]);
      }
      Loading.mask();
      com.UploadFile(formData, function (data) {
        let imgData = data.body;
        for (let i in imgData) {
          self.sedata.Section[index]["Desc"].push({Img: imgData[i]});
        }
        Loading.unmask();
      });
    },
    //上传video中的tip
    videoTipsPop: function (index) {
      this.sedata._currentSection = index;
      $(".show_update_video").show();
      $(".mask").show();
      //show 输入视频地址链接
      $("#app").on("click", "#alertVideoPop", function () {
        $(".show_update_video").hide();
        com.showCenter($(".pop_ups"))
      });
    },
    //添加视频
    addVideo: function () {
      let vsrc = $(this.sedata.VideoUrl).attr("src");
      if(vsrc){
        this.sedata.Section[this.sedata._currentSection]["Desc"].push({
          Video: vsrc
        });
        $(".mask").hide();
      }else{
        com.alertDialog("请输入正确链接")
      }
    },
    //删除节点
    deleteUp: function (index, arr) {
      console.log(index,arr)
      arr.splice(index, 1);
    }
  },
  created: function () {
    autosize(document.querySelectorAll("textarea"));
    this.$emit("child-say", this.sedata);
  },
  updated: function () {
    autosize(document.querySelectorAll("textarea"));
    this.$emit("child-say", this.sedata);
  }
});
export default EditSection;
